<template>
<div class="user">
<div class="titletext">出库单明细查询</div>
    <div class="demo-date-picker"> 
       <span class="demonstration">交易时间</span>
       <el-date-picker v-model="value1" type="date" placeholder="年 /月 /日" />
  </div>
  <div class="search">
  
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      
        <el-form-item label="用户ID">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" class="center"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="card" label="明细号" width="75">
						<!-- <template #default="scope">{{ scope.row.date }}</template> -->
					</el-table-column>
					<el-table-column prop="chu" label="货主" width="70" />
					<el-table-column prop="master" label="托盘号" width="75"/>
					
					<el-table-column prop="spay" label="货物名称" width="90"/>
					<el-table-column prop="spays" label="验货员" width="75"/>
					<el-table-column prop="spay" label="仓库员" width="90"/>
					<el-table-column prop="delete" label="出库数量" width="80"/>
					<el-table-column prop="true" label="规格(公斤/件)" />
					<el-table-column prop="true" label="当前数量" />
                    <el-table-column prop="date" label="业务时间" width="165" />
				</el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { ref } from "vue";
import type { ElTable } from "element-plus";
const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const formInline = reactive({
  user: "",
  region: "",
});
interface User {
  userId: number;
  name: string;
  account: string;
}

const onSubmit = () => {
  console.log("submit!");
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
		multipleSelection.value = val
	}
	const tableData = [{
		card: '22233',
		settle: '小王',
		master: '小黑',
		date: '2016-08-06 10:16:03',
    chu:'周杰伦',
    cang:'4',
    spays:'可杰',
    spay:'积泥太美',
		state:'入库完成',
		delete: '100',
     true:'在路上'
	}, {
		card: '2233',
		settle: '小王',
		master: '白玉',
		date: '2018-09-30 18:23:46',
		spay:'积泥太美',
        spays:'青花',
		chu:'2',
    cang:'4',
		state:'结算完成',
		delete: '100',
    true:'在路上'
	}, ]
</script>
<style scoped>

.demo-date-picker {
  display: flex;
  
  padding: 10px 20px 5px;
  flex-wrap: wrap;
  background-color: #f2f2f2;
  margin: 10px 20px ;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: #333333;
  font-size: 14px;
 margin-right: 10px;
 margin-top: 6px;
}
.list {
    margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  overflow: auto;
  border: 1px solid #ddd;
}
.search {
  height: 50px;
  line-height: 65px;
  margin: 0 20px;
  display: inline-block;
  background-color: #f2f2f2;
  padding-left: 20px;
}

.bg{
     background-color: #f2f2f2;
}
.user {
  width: 1000px;
  min-width: 1000px;
  height: 85vh;
  margin: 10px;
  overflow: auto;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}
.titletext {
  color: #2e6095;
  height: 40px;
  line-height: 40px;
  padding-left: 25px;
  background-color: #f7f7f7;
  margin-bottom: 10px;
}
</style>
<style>
.center .el-table__cell{
  text-align: center;
}
</style>